<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../lib/icheck/css/custom.css?v=1.0.2" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
    <link href="../../lib/icheck/skins/all.css?v=1.0.2" rel="stylesheet">
    <script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js"></script>
    <script src="../../lib/icheck/icheck.js?v=1.0.2"></script>
    <script src="../../lib/icheck/js/custom.min.js?v=1.0.2"></script>
</head>
<body>

<div class="container bs-docs-container">
    <div class="doc-section">
        <h2 class="page-header">
            icheck
        </h2>
        <div class="skins">
            <h2>皮肤</h2>
            <div class="skin skin-minimal">
                <div class="arrows">
                    <div class="top" data-to="demo"></div>
                    <div class="bottom" data-to="skin-square"></div>
                </div>
                <h3>Minimal 皮肤</h3>
                <dl class="clear">
                    <dd class="selected">
                        <div class="skin-section">
                            <h4>Live</h4>
                            <ul class="list">
                                <li>
                                    <input tabindex="5" type="checkbox" id="minimal-checkbox-1">
                                    <label for="minimal-checkbox-1">Checkbox 1</label>
                                </li>
                                <li>
                                    <input tabindex="6" type="checkbox" id="minimal-checkbox-2" checked>
                                    <label for="minimal-checkbox-2">Checkbox 2</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="minimal-checkbox-disabled" disabled>
                                    <label for="minimal-checkbox-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="minimal-checkbox-disabled-checked" checked disabled>
                                    <label for="minimal-checkbox-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <ul class="list">
                                <li>
                                    <input tabindex="7" type="radio" id="minimal-radio-1" name="minimal-radio">
                                    <label for="minimal-radio-1">Radio button 1</label>
                                </li>
                                <li>
                                    <input tabindex="8" type="radio" id="minimal-radio-2" name="minimal-radio" checked>
                                    <label for="minimal-radio-2">Radio button 2</label>
                                </li>
                                <li>
                                    <input type="radio" id="minimal-radio-disabled" disabled>
                                    <label for="minimal-radio-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="radio" id="minimal-radio-disabled-checked" checked disabled>
                                    <label for="minimal-radio-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <div class="colors clear">
                                <strong>Color 主题</strong>
                                <ul>
                                    <li class="active" title="Black"></li>
                                    <li class="red" title="Red"></li>
                                    <li class="green" title="Green"></li>
                                    <li class="blue" title="Blue"></li>
                                    <li class="aero" title="Aero"></li>
                                    <li class="grey" title="Grey"></li>
                                    <li class="orange" title="Orange"></li>
                                    <li class="yellow" title="Yellow"></li>
                                    <li class="pink" title="Pink"></li>
                                    <li class="purple" title="Purple"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="skin-section skin-states">
                            <h4>States</h4>
                            <ul class="list">
                                <li>
                                    <div class="state icheckbox_minimal"></div>
                                    <div class="state iradio_minimal"></div>
                                    Normal
                                </li>
                                <li>
                                    <div class="state icheckbox_minimal hover"></div>
                                    <div class="state iradio_minimal hover"></div>
                                    Hover
                                </li>
                                <li>
                                    <div class="state icheckbox_minimal checked"></div>
                                    <div class="state iradio_minimal checked"></div>
                                    Checked
                                </li>
                                <li>
                                    <div class="state icheckbox_minimal disabled"></div>
                                    <div class="state iradio_minimal disabled"></div>
                                    Disabled
                                </li>
                                <li>
                                    <div class="state icheckbox_minimal checked disabled"></div>
                                    <div class="state iradio_minimal checked disabled"></div>
                                    Disabled &amp; checked
                                </li>
                            </ul>
                        </div>
                        <script>
                            $(document).ready(function(){
                                $('.skin-minimal input').iCheck({
                                    checkboxClass: 'icheckbox_minimal',
                                    radioClass: 'iradio_minimal',
                                    increaseArea: '20%'
                                });
                            });
                        </script>
                    </dd>
                    <dt class="selected">Demo</dt>
                    <dd>
                        <div class="skin-pre">
                            <p>
                                Make sure <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the <span class="mark">icheck.js</span>.
                            </p>
                        </div>
                        <ol class="skin-usage">
                            <li>
                                Choose a color scheme, there are 10 different styles available:
                                <div class="schemes clear">
                                    <ul>
                                        <li><strong>Black</strong> &mdash; minimal.css</li>
                                        <li><strong>Red</strong> &mdash; red.css</li>
                                        <li><strong>Green</strong> &mdash; green.css</li>
                                        <li><strong>Blue</strong> &mdash; blue.css</li>
                                        <li><strong>Aero</strong> &mdash; aero.css</li>
                                    </ul>
                                    <ul>
                                        <li><strong>Grey</strong> &mdash; grey.css</li>
                                        <li><strong>Orange</strong> &mdash; orange.css</li>
                                        <li><strong>Yellow</strong> &mdash; yellow.css</li>
                                        <li><strong>Pink</strong> &mdash; pink.css</li>
                                        <li><strong>Purple</strong> &mdash; purple.css</li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                Copy <span class="mark">/skins/minimal/</span> folder and <span class="mark">icheck.js</span>  file to your site.
                            </li>
                            <li>
                                <p>Insert before <span class="mark">&lt;/head></span> in your HTML (replace <span class="mark">your-path</span> and <span class="mark">color-scheme</span>):</p>
                                <pre class="markup">
&lt;link href="your-path/minimal/color-scheme.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                                <p>Example for a <strong>Red</strong> color scheme:</p>
                                <pre class="markup">
&lt;link href="your-path/minimal/red.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                            </li>
                            <li>
                                <p>Add some checkboxes and radio buttons to your HTML:</p>
                                <pre class="markup">
&lt;input type="checkbox">
&lt;input type="checkbox" checked>
&lt;input type="radio" name="iCheck">
&lt;input type="radio" name="iCheck" checked>
</pre>
                            </li>
                            <li>
                                <p>Add JavaScript to your HTML to launch iCheck plugin:</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%' <span class="comment">// optional</span>
  });
});
&lt;/script>
</pre>
                                <p>For different from black color schemes use this code (example for <strong>Red</strong>):</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '20%' <span class="comment">// optional</span>
  });
});
&lt;/script>
</pre>
                            </li>
                            <li>Done.</li>
                        </ol>
                    </dd>
                    <dt>使用说明</dt>
                </dl>
            </div>
            <div class="skin skin-square">
                <div class="arrows">
                    <div class="top" data-to="skin-minimal"></div>
                    <div class="bottom" data-to="skin-flat"></div>
                </div>
                <h3>Square 皮肤</h3>
                <dl class="clear">
                    <dd class="selected">
                        <div class="skin-section">
                            <h4>Live</h4>
                            <ul class="list">
                                <li>
                                    <input tabindex="9" type="checkbox" id="square-checkbox-1">
                                    <label for="square-checkbox-1">Checkbox 1</label>
                                </li>
                                <li>
                                    <input tabindex="10" type="checkbox" id="square-checkbox-2" checked>
                                    <label for="square-checkbox-2">Checkbox 2</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="square-checkbox-disabled" disabled>
                                    <label for="square-checkbox-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="square-checkbox-disabled-checked" checked disabled>
                                    <label for="square-checkbox-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <ul class="list">
                                <li>
                                    <input tabindex="11" type="radio" id="square-radio-1" name="square-radio">
                                    <label for="square-radio-1">Radio button 1</label>
                                </li>
                                <li>
                                    <input tabindex="12" type="radio" id="square-radio-2" name="square-radio" checked>
                                    <label for="square-radio-2">Radio button 2</label>
                                </li>
                                <li>
                                    <input type="radio" id="square-radio-disabled" disabled>
                                    <label for="square-radio-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="radio" id="square-radio-disabled-checked" checked disabled>
                                    <label for="square-radio-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <div class="colors clear">
                                <strong>Color schemes</strong>
                                <ul>
                                    <li title="Black"></li>
                                    <li class="red" title="Red"></li>
                                    <li class="green active" title="Green"></li>
                                    <li class="blue" title="Blue"></li>
                                    <li class="aero" title="Aero"></li>
                                    <li class="grey" title="Grey"></li>
                                    <li class="orange" title="Orange"></li>
                                    <li class="yellow" title="Yellow"></li>
                                    <li class="pink" title="Pink"></li>
                                    <li class="purple" title="Purple"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="skin-section skin-states">
                            <h4>States</h4>
                            <ul class="list">
                                <li>
                                    <div class="state icheckbox_square-green"></div>
                                    <div class="state iradio_square-green"></div>
                                    Normal
                                </li>
                                <li>
                                    <div class="state icheckbox_square-green hover"></div>
                                    <div class="state iradio_square-green hover"></div>
                                    Hover
                                </li>
                                <li>
                                    <div class="state icheckbox_square-green checked"></div>
                                    <div class="state iradio_square-green checked"></div>
                                    Checked
                                </li>
                                <li>
                                    <div class="state icheckbox_square-green disabled"></div>
                                    <div class="state iradio_square-green disabled"></div>
                                    Disabled
                                </li>
                                <li>
                                    <div class="state icheckbox_square-green checked disabled"></div>
                                    <div class="state iradio_square-green checked disabled"></div>
                                    Disabled &amp; checked
                                </li>
                            </ul>
                        </div>
                        <script>
                            $(document).ready(function(){
                                $('.skin-square input').iCheck({
                                    checkboxClass: 'icheckbox_square-green',
                                    radioClass: 'iradio_square-green',
                                    increaseArea: '20%'
                                });
                            });
                        </script>
                    </dd>
                    <dt class="selected">Demo</dt>
                    <dd>
                        <div class="skin-pre">
                            <p>
                                Make sure <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the <span class="mark">icheck.js</span>.
                            </p>
                        </div>
                        <ol class="skin-usage">
                            <li>
                                Choose a color scheme, there are 10 different styles available:
                                <div class="schemes clear">
                                    <ul>
                                        <li><strong>Black</strong> &mdash; square.css</li>
                                        <li><strong>Red</strong> &mdash; red.css</li>
                                        <li><strong>Green</strong> &mdash; green.css</li>
                                        <li><strong>Blue</strong> &mdash; blue.css</li>
                                        <li><strong>Aero</strong> &mdash; aero.css</li>
                                    </ul>
                                    <ul>
                                        <li><strong>Grey</strong> &mdash; grey.css</li>
                                        <li><strong>Orange</strong> &mdash; orange.css</li>
                                        <li><strong>Yellow</strong> &mdash; yellow.css</li>
                                        <li><strong>Pink</strong> &mdash; pink.css</li>
                                        <li><strong>Purple</strong> &mdash; purple.css</li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                Copy <span class="mark">/skins/square/</span> folder and <span class="mark">icheck.js</span> file to your site.
                            </li>
                            <li>
                                <p>Insert before <span class="mark">&lt;/head></span> in your HTML (replace <span class="mark">your-path</span> and <span class="mark">color-scheme</span>):</p>
                                <pre class="markup">
&lt;link href="your-path/square/color-scheme.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                                <p>Example for a <strong>Red</strong> color scheme:</p>
                                <pre class="markup">
&lt;link href="your-path/square/red.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                            </li>
                            <li>
                                <p>Add some checkboxes and radio buttons to your HTML:</p>
                                <pre class="markup">
&lt;input type="checkbox">
&lt;input type="checkbox" checked>
&lt;input type="radio" name="iCheck">
&lt;input type="radio" name="iCheck" checked>
</pre>
                            </li>
                            <li>
                                <p>Add JavaScript to your HTML to launch iCheck plugin:</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square',
    radioClass: 'iradio_square',
    increaseArea: '20%' <span class="comment">// optional</span>
  });
});
&lt;/script>
</pre>
                                <p>For different from black color schemes use this code (example for <strong>Red</strong>):</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-red',
    radioClass: 'iradio_square-red',
    increaseArea: '20%' <span class="comment">// optional</span>
  });
});
&lt;/script>
</pre>
                            </li>
                            <li>Done.</li>
                        </ol>
                    </dd>
                    <dt>使用说明</dt>
                </dl>
            </div>
            <div class="skin skin-flat">
                <div class="arrows">
                    <div class="top" data-to="skin-square"></div>
                    <div class="bottom" data-to="skin-line"></div>
                </div>
                <h3>Flat 皮肤</h3>
                <dl class="clear">
                    <dd class="selected">
                        <div class="skin-section">
                            <h4>Live</h4>
                            <ul class="list">
                                <li>
                                    <input tabindex="13" type="checkbox" id="flat-checkbox-1">
                                    <label for="flat-checkbox-1">Checkbox 1</label>
                                </li>
                                <li>
                                    <input tabindex="14" type="checkbox" id="flat-checkbox-2" checked>
                                    <label for="flat-checkbox-2">Checkbox 2</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="flat-checkbox-disabled" disabled>
                                    <label for="flat-checkbox-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="flat-checkbox-disabled-checked" checked disabled>
                                    <label for="flat-checkbox-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <ul class="list">
                                <li>
                                    <input tabindex="15" type="radio" id="flat-radio-1" name="flat-radio">
                                    <label for="flat-radio-1">Radio button 1</label>
                                </li>
                                <li>
                                    <input tabindex="16" type="radio" id="flat-radio-2" name="flat-radio" checked>
                                    <label for="flat-radio-2">Radio button 2</label>
                                </li>
                                <li>
                                    <input type="radio" id="flat-radio-disabled" disabled>
                                    <label for="flat-radio-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="radio" id="flat-radio-disabled-checked" checked disabled>
                                    <label for="flat-radio-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <div class="colors clear">
                                <strong>Color schemes</strong>
                                <ul>
                                    <li title="Black"></li>
                                    <li class="red active" title="Red"></li>
                                    <li class="green" title="Green"></li>
                                    <li class="blue" title="Blue"></li>
                                    <li class="aero" title="Aero"></li>
                                    <li class="grey" title="Grey"></li>
                                    <li class="orange" title="Orange"></li>
                                    <li class="yellow" title="Yellow"></li>
                                    <li class="pink" title="Pink"></li>
                                    <li class="purple" title="Purple"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="skin-section skin-states">
                            <h4>States</h4>
                            <ul class="list">
                                <li>
                                    <div class="state icheckbox_flat-red"></div>
                                    <div class="state iradio_flat-red"></div>
                                    Normal
                                </li>
                                <li>
                                    <div class="state icheckbox_flat-red checked"></div>
                                    <div class="state iradio_flat-red checked"></div>
                                    Checked
                                </li>
                                <li>
                                    <div class="state icheckbox_flat-red disabled"></div>
                                    <div class="state iradio_flat-red disabled"></div>
                                    Disabled
                                </li>
                                <li>
                                    <div class="state icheckbox_flat-red checked disabled"></div>
                                    <div class="state iradio_flat-red checked disabled"></div>
                                    Disabled &amp; checked
                                </li>
                            </ul>
                        </div>
                        <script>
                            $(document).ready(function(){
                                $('.skin-flat input').iCheck({
                                    checkboxClass: 'icheckbox_flat-red',
                                    radioClass: 'iradio_flat-red'
                                });
                            });
                        </script>
                    </dd>
                    <dt class="selected">Demo</dt>
                    <dd>
                        <div class="skin-pre">
                            <p>
                                Make sure <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the <span class="mark">icheck.js</span>.
                            </p>
                        </div>
                        <ol class="skin-usage">
                            <li>
                                Choose a color scheme, there are 10 different styles available:
                                <div class="schemes clear">
                                    <ul>
                                        <li><strong>Black</strong> &mdash; square.css</li>
                                        <li><strong>Red</strong> &mdash; red.css</li>
                                        <li><strong>Green</strong> &mdash; green.css</li>
                                        <li><strong>Blue</strong> &mdash; blue.css</li>
                                        <li><strong>Aero</strong> &mdash; aero.css</li>
                                    </ul>
                                    <ul>
                                        <li><strong>Grey</strong> &mdash; grey.css</li>
                                        <li><strong>Orange</strong> &mdash; orange.css</li>
                                        <li><strong>Yellow</strong> &mdash; yellow.css</li>
                                        <li><strong>Pink</strong> &mdash; pink.css</li>
                                        <li><strong>Purple</strong> &mdash; purple.css</li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                Copy <span class="mark">/skins/flat/</span> folder and <span class="mark">icheck.js</span> file to your site.
                            </li>
                            <li>
                                <p>Insert before <span class="mark">&lt;/head></span> in your HTML (replace <span class="mark">your-path</span> and <span class="mark">color-scheme</span>):</p>
                                <pre class="markup">
&lt;link href="your-path/flat/color-scheme.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                                <p>Example for a <strong>Red</strong> color scheme:</p>
                                <pre class="markup">
&lt;link href="your-path/flat/red.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                            </li>
                            <li>
                                <p>Add some checkboxes and radio buttons to your HTML:</p>
                                <pre class="markup">
&lt;input type="checkbox">
&lt;input type="checkbox" checked>
&lt;input type="radio" name="iCheck">
&lt;input type="radio" name="iCheck" checked>
</pre>
                            </li>
                            <li>
                                <p>Add JavaScript to your HTML to launch iCheck plugin:</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_flat',
    radioClass: 'iradio_flat'
  });
});
&lt;/script>
</pre>
                                <p>For different from black color schemes use this code (example for <strong>Red</strong>):</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_flat-red',
    radioClass: 'iradio_flat-red'
  });
});
&lt;/script>
</pre>
                            </li>
                            <li>Done.</li>
                        </ol>
                    </dd>
                    <dt>使用说明</dt>
                </dl>
            </div>
            <div class="skin skin-line">
                <div class="arrows">
                    <div class="top" data-to="skin-flat"></div>
                    <div class="bottom" data-to="skin-polaris"></div>
                </div>
                <h3>Line 皮肤</h3>
                <dl class="clear">
                    <dd class="selected">
                        <div class="skin-section">
                            <h4>Live</h4>
                            <ul class="list">
                                <li>
                                    <input tabindex="17" type="checkbox" id="line-checkbox-1">
                                    <label for="line-checkbox-1">Checkbox 1</label>
                                </li>
                                <li>
                                    <input tabindex="18" type="checkbox" id="line-checkbox-2" checked>
                                    <label for="line-checkbox-2">Checkbox 2</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="line-checkbox-disabled" disabled>
                                    <label for="line-checkbox-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="line-checkbox-disabled-checked" checked disabled>
                                    <label for="line-checkbox-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <ul class="list">
                                <li>
                                    <input tabindex="19" type="radio" id="line-radio-1" name="line-radio">
                                    <label for="line-radio-1">Radio button 1</label>
                                </li>
                                <li>
                                    <input tabindex="20" type="radio" id="line-radio-2" name="line-radio" checked>
                                    <label for="line-radio-2">Radio button 2</label>
                                </li>
                                <li>
                                    <input type="radio" id="line-radio-disabled" disabled>
                                    <label for="line-radio-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="radio" id="line-radio-disabled-checked" checked disabled>
                                    <label for="line-radio-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <div class="colors clear">
                                <strong>Color schemes</strong>
                                <ul>
                                    <li title="Black"></li>
                                    <li class="red" title="Red"></li>
                                    <li class="green" title="Green"></li>
                                    <li class="blue active" title="Blue"></li>
                                    <li class="aero" title="Aero"></li>
                                    <li class="grey" title="Grey"></li>
                                    <li class="orange" title="Orange"></li>
                                    <li class="yellow" title="Yellow"></li>
                                    <li class="pink" title="Pink"></li>
                                    <li class="purple" title="Purple"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="skin-section skin-states">
                            <h4>States</h4>
                            <ul class="list">
                                <li>
                                    <div class="state icheckbox_line-blue">
                                        <div class="icheck_line-icon"></div>
                                        Normal
                                    </div>
                                </li>
                                <li>
                                    <div class="state icheckbox_line-blue hover">
                                        <div class="icheck_line-icon"></div>
                                        Hover
                                    </div>
                                </li>
                                <li>
                                    <div class="state icheckbox_line-blue checked">
                                        <div class="icheck_line-icon"></div>
                                        Checked
                                    </div>
                                </li>
                                <li>
                                    <div class="state icheckbox_line-blue disabled">
                                        <div class="icheck_line-icon"></div>
                                        Disabled
                                    </div>
                                </li>
                                <li>
                                    <div class="state icheckbox_line-blue checked disabled">
                                        <div class="icheck_line-icon"></div>
                                        Disabled &amp; checked
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <script>
                            $(document).ready(function(){
                                $('.skin-line input').each(function(){
                                    var self = $(this),
                                        label = self.next(),
                                        label_text = label.text();

                                    label.remove();
                                    self.iCheck({
                                        checkboxClass: 'icheckbox_line-blue',
                                        radioClass: 'iradio_line-blue',
                                        insert: '<div class="icheck_line-icon"></div>' + label_text
                                    });
                                });
                            });
                        </script>
                    </dd>
                    <dt class="selected">Demo</dt>
                    <dd>
                        <div class="skin-pre">
                            <p>
                                Make sure <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the <span class="mark">icheck.js</span>.
                            </p>
                        </div>
                        <ol class="skin-usage">
                            <li>
                                Choose a color scheme, there are 10 different styles available:
                                <div class="schemes clear">
                                    <ul>
                                        <li><strong>Black</strong> &mdash; line.css</li>
                                        <li><strong>Red</strong> &mdash; red.css</li>
                                        <li><strong>Green</strong> &mdash; green.css</li>
                                        <li><strong>Blue</strong> &mdash; blue.css</li>
                                        <li><strong>Aero</strong> &mdash; aero.css</li>
                                    </ul>
                                    <ul>
                                        <li><strong>Grey</strong> &mdash; grey.css</li>
                                        <li><strong>Orange</strong> &mdash; orange.css</li>
                                        <li><strong>Yellow</strong> &mdash; yellow.css</li>
                                        <li><strong>Pink</strong> &mdash; pink.css</li>
                                        <li><strong>Purple</strong> &mdash; purple.css</li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                Copy <span class="mark">/skins/line/</span> folder and <span class="mark">icheck.js</span> file to your site.
                            </li>
                            <li>
                                <p>Insert before <span class="mark">&lt;/head></span> in your HTML (replace <span class="mark">your-path</span> and <span class="mark">color-scheme</span>):</p>
                                <pre class="markup">
&lt;link href="your-path/line/color-scheme.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                                <p>Example for a <strong>Red</strong> color scheme:</p>
                                <pre class="markup">
&lt;link href="your-path/line/red.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                            </li>
                            <li>
                                <p>Add some checkboxes, radio buttons and labels to your HTML:</p>
                                <pre class="markup">
&lt;input type="checkbox">
&lt;label>Checkbox 1&lt;/label>

&lt;input type="checkbox" checked>
&lt;label>Checkbox 2&lt;/label>

&lt;input type="radio" name="iCheck">
&lt;label>Radio button 1&lt;/label>

&lt;input type="radio" name="iCheck" checked>
&lt;label>Radio button 2&lt;/label>
</pre>
                            </li>
                            <li>
                                <p>Add JavaScript to your HTML to launch iCheck plugin:</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').each(function(){
    var self = $(this),
      label = self.next(),
      label_text = label.text();

    label.remove();
    self.iCheck({
      checkboxClass: 'icheckbox_line',
      radioClass: 'iradio_line',
      insert: '&lt;div class="icheck_line-icon">&lt;/div>' + label_text
    });
  });
});
&lt;/script>
</pre>
                                <p>For different from black color schemes use this code (example for <strong>Red</strong>):</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').each(function(){
    var self = $(this),
      label = self.next(),
      label_text = label.text();

    label.remove();
    self.iCheck({
      checkboxClass: 'icheckbox_line-red',
      radioClass: 'iradio_line-red',
      insert: '&lt;div class="icheck_line-icon">&lt;/div>' + label_text
    });
  });
});
&lt;/script>
</pre>
                            </li>
                            <li>Done.</li>
                        </ol>
                    </dd>
                    <dt>使用说明</dt>
                </dl>
            </div>
            <div class="skin skin-polaris">
                <div class="arrows">
                    <div class="top" data-to="skin-line"></div>
                    <div class="bottom" data-to="skin-futurico"></div>
                </div>
                <h3>Polaris 皮肤</h3>
                <dl class="clear">
                    <dd class="selected">
                        <div class="skin-section">
                            <h4>Live</h4>
                            <ul class="list">
                                <li>
                                    <input tabindex="21" type="checkbox" id="polaris-checkbox-1">
                                    <label for="polaris-checkbox-1">Checkbox 1</label>
                                </li>
                                <li>
                                    <input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
                                    <label for="polaris-checkbox-2">Checkbox 2</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="polaris-checkbox-disabled" disabled>
                                    <label for="polaris-checkbox-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="polaris-checkbox-disabled-checked" checked disabled>
                                    <label for="polaris-checkbox-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <ul class="list">
                                <li>
                                    <input tabindex="23" type="radio" id="polaris-radio-1" name="polaris-radio">
                                    <label for="polaris-radio-1">Radio button 1</label>
                                </li>
                                <li>
                                    <input tabindex="24" type="radio" id="polaris-radio-2" name="polaris-radio" checked>
                                    <label for="polaris-radio-2">Radio button 2</label>
                                </li>
                                <li>
                                    <input type="radio" id="polaris-radio-disabled" disabled>
                                    <label for="polaris-radio-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="radio" id="polaris-radio-disabled-checked" checked disabled>
                                    <label for="polaris-radio-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                        </div>
                        <div class="skin-section skin-states">
                            <h4>States</h4>
                            <ul class="list">
                                <li>
                                    <div class="state icheckbox_polaris"></div>
                                    <div class="state iradio_polaris"></div>
                                    Normal
                                </li>
                                <li>
                                    <div class="state icheckbox_polaris hover"></div>
                                    <div class="state iradio_polaris hover"></div>
                                    Hover
                                </li>
                                <li>
                                    <div class="state icheckbox_polaris checked"></div>
                                    <div class="state iradio_polaris checked"></div>
                                    Checked
                                </li>
                                <li>
                                    <div class="state icheckbox_polaris disabled"></div>
                                    <div class="state iradio_polaris disabled"></div>
                                    Disabled
                                </li>
                                <li>
                                    <div class="state icheckbox_polaris checked disabled"></div>
                                    <div class="state iradio_polaris checked disabled"></div>
                                    Disabled &amp; checked
                                </li>
                            </ul>
                        </div>
                        <script>
                            $(document).ready(function(){
                                $('.skin-polaris input').iCheck({
                                    checkboxClass: 'icheckbox_polaris',
                                    radioClass: 'iradio_polaris',
                                    increaseArea: '-10%'
                                });
                            });
                        </script>
                    </dd>
                    <dt class="selected">Demo</dt>
                    <dd>
                        <div class="skin-pre">
                            <p>
                                Make sure <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the <span class="mark">icheck.js</span>.
                            </p>
                        </div>
                        <ol class="skin-usage">
                            <li>
                                Copy <span class="mark">/skins/polaris/</span> folder and <span class="mark">icheck.js</span> file to your site.
                            </li>
                            <li>
                                <p>Insert before <span class="mark">&lt;/head></span> in your HTML (replace <span class="mark">your-path</span> and <span class="mark">color-scheme</span>):</p>
                                <pre class="markup">
&lt;link href="your-path/polaris/polaris.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                            </li>
                            <li>
                                <p>Add some checkboxes and radio buttons to your HTML:</p>
                                <pre class="markup">
&lt;input type="checkbox">
&lt;input type="checkbox" checked>
&lt;input type="radio" name="iCheck">
&lt;input type="radio" name="iCheck" checked>
</pre>
                            </li>
                            <li>
                                <p>Add JavaScript to your HTML to launch iCheck plugin:</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_polaris',
    radioClass: 'iradio_polaris',
    increaseArea: '-10%' <span class="comment">// optional</span>
  });
});
&lt;/script>
</pre>
                            </li>
                            <li>Done.</li>
                        </ol>
                    </dd>
                    <dt>使用说明</dt>
                </dl>
            </div>
            <div class="skin skin-futurico">
                <div class="arrows">
                    <div class="top" data-to="skin-polaris"></div>
                    <div class="bottom" data-to="usage"></div>
                </div>
                <h3>Futurico 皮肤</h3>
                <dl class="clear">
                    <dd class="selected">
                        <div class="skin-section">
                            <h4>Live</h4>
                            <ul class="list">
                                <li>
                                    <input tabindex="25" type="checkbox" id="futurico-checkbox-1">
                                    <label for="futurico-checkbox-1">Checkbox 1</label>
                                </li>
                                <li>
                                    <input tabindex="26" type="checkbox" id="futurico-checkbox-2" checked>
                                    <label for="futurico-checkbox-2">Checkbox 2</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="futurico-checkbox-disabled" disabled>
                                    <label for="futurico-checkbox-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="checkbox" id="futurico-checkbox-disabled-checked" checked disabled>
                                    <label for="futurico-checkbox-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                            <ul class="list">
                                <li>
                                    <input tabindex="27" type="radio" id="futurico-radio-1" name="futurico-radio">
                                    <label for="futurico-radio-1">Radio button 1</label>
                                </li>
                                <li>
                                    <input tabindex="28" type="radio" id="futurico-radio-2" name="futurico-radio" checked>
                                    <label for="futurico-radio-2">Radio button 2</label>
                                </li>
                                <li>
                                    <input type="radio" id="futurico-radio-disabled" disabled>
                                    <label for="futurico-radio-disabled">Disabled</label>
                                </li>
                                <li>
                                    <input type="radio" id="futurico-radio-disabled-checked" checked disabled>
                                    <label for="futurico-radio-disabled-checked">Disabled &amp; checked</label>
                                </li>
                            </ul>
                        </div>
                        <div class="skin-section skin-states">
                            <h4>States</h4>
                            <ul class="list">
                                <li>
                                    <div class="state icheckbox_futurico"></div>
                                    <div class="state iradio_futurico"></div>
                                    Normal
                                </li>
                                <li>
                                    <div class="state icheckbox_futurico checked"></div>
                                    <div class="state iradio_futurico checked"></div>
                                    Checked
                                </li>
                                <li>
                                    <div class="state icheckbox_futurico disabled"></div>
                                    <div class="state iradio_futurico disabled"></div>
                                    Disabled
                                </li>
                                <li>
                                    <div class="state icheckbox_futurico checked disabled"></div>
                                    <div class="state iradio_futurico checked disabled"></div>
                                    Disabled &amp; checked
                                </li>
                            </ul>
                        </div>
                        <script>
                            $(document).ready(function(){
                                $('.skin-futurico input').iCheck({
                                    checkboxClass: 'icheckbox_futurico',
                                    radioClass: 'iradio_futurico',
                                    increaseArea: '20%'
                                });
                            });
                        </script>
                    </dd>
                    <dt class="selected">Demo</dt>
                    <dd>
                        <div class="skin-pre">
                            <p>
                                Make sure <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the <span class="mark">icheck.js</span>.
                            </p>
                        </div>
                        <ol class="skin-usage">
                            <li>
                                Copy <span class="mark">/skins/futurico/</span> folder and <span class="mark">icheck.js</span> file to your site.
                            </li>
                            <li>
                                <p>Insert before <span class="mark">&lt;/head></span> in your HTML (replace <span class="mark">your-path</span> and <span class="mark">color-scheme</span>):</p>
                                <pre class="markup">
&lt;link href="your-path/futurico/futurico.css" rel="stylesheet">
&lt;script src="your-path/icheck.js">&lt;/script>
</pre>
                            </li>
                            <li>
                                <p>Add some checkboxes and radio buttons to your HTML:</p>
                                <pre class="markup">
&lt;input type="checkbox">
&lt;input type="checkbox" checked>
&lt;input type="radio" name="iCheck">
&lt;input type="radio" name="iCheck" checked>
</pre>
                            </li>
                            <li>
                                <p>Add JavaScript to your HTML to launch iCheck plugin:</p>
                                <pre class="markup">
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_futurico',
    radioClass: 'iradio_futurico',
    increaseArea: '20%' <span class="comment">// optional</span>
  });
});
&lt;/script>
</pre>
                            </li>
                            <li>Done.</li>
                        </ol>
                    </dd>
                    <dt>使用说明</dt>
                </dl>
            </div>
            <div class="skins-info">
                <p>所有皮肤（除了Line）都是支持透明的，你可以将它们应用在任何背景上。</p>
                <p>Square、Flat、Polaris 和 Futurico 皮肤参考了<a href="http://designmodo.com/freebies/" target="blank">Designmodo's UI packs</a>。</p>
            </div>
        </div>
    </div>
</div>


</body>
</html>